<template>
  <div class="login-alls">
    <div class="login-title">找回密码</div>
    <div class="login-input">
      <div class="login-input-text">
        <span class="el-icon-user keys"></span>
        <input
          type="text"
          placeholder="请输入注册的用户名"
          @blur="users"
          v-model="userS"
        />
      </div>
      <div class="login-input-text">
        <span class="el-icon-mobile-phone keys"></span>
        <input
          type="text"
          placeholder="请输入注册的手机号"
          @blur="iphoneb"
          v-model="iphonE"
        />
      </div>
      <div class="login-input-text">
        <span class="el-icon-key keys"></span>
        <input
          type="password"
          placeholder="请输入新的密码"
          @blur="passw"
          v-model="passW"
        />
      </div>
      <div class="login-btn" @click="findTab()">验证</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      userS: "",
      iphonE: "",
      passW: "",
    };
  },
  mounted() {},
  methods: {
    // 用户注册表单验证
    users() {
      let userReg = new RegExp("^[\u4e00-\u9fa5A-Za-z0-9]{5,16}$");
      if (this.userS == "") {
        this.$message({
          message: "用户名不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.userS)) {
        this.$message({
          message: "用户名格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入汉字、英文或数字用户名",
          type: "error",
        });
      }
    },
    // 手机号验证
    iphoneb() {
      let userReg = new RegExp("^1[3-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$");
      if (this.iphonE == "") {
        this.$message({
          message: "手机号不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.iphonE)) {
        this.$message({
          message: "手机号格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入正确格式的手机号",
          type: "error",
        });
      }
    },
    // 注册密码验证
    passw() {
      let userReg = new RegExp("^[a-zA-Z0-9]{6,16}$");
      if (this.passW == "") {
        this.$message({
          message: "密码不能为空！",
          type: "warning",
        });
      } else if (userReg.test(this.passW)) {
        this.$message({
          message: "密码格式正确！！！",
          type: "success",
        });
      } else {
        this.$message({
          message: "请输入正确格式的密码！",
          type: "error",
        });
      }
    },
    async findTab() {
      if (this.userS !== "" && this.iphonE !== "" && this.passW !== "") {
        let findPass = await this.$http.post("/alterLogin", {
          uname: this.userS,
          iphone: this.iphonE,
          password: this.passW,
        });
        
        this.$message({
          message: findPass.data.message,
          type: "success",
        });

        console.log(findPass.data);
      } else {
        this.$message({
          message: "校验不通过~！",
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-alls {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  .login-title {
    width: 100%;
    text-align: center;
    font-size: 27px;
    font-weight: bold;
    margin: 20px 0;
    color: rgb(0, 0, 0);
  }
  .login-input {
    width: 100%;
    margin: 60px 0px;
    height: auto;
    .login-btn {
      width: 410px;
      height: 50px;
      background: rgb(0, 0, 0);
      color: #fff;
      text-align: center;
      line-height: 50px;
      margin: 40px auto;
      border-radius: 10px;
    }
    .login-input-text {
      margin: 20px 60px;
      text-align: center;
      width: 460px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      input {
        width: 100%;
        height: 38px;
        border: none;
        margin-left: 15px;
        border-radius: 3px;
        padding: 0 20px;
      }
      .keys {
        font-size: 30px;
      }
    }
  }
}
</style>
